<template>
    <div class="app-wrapper">
        <img v-if="themeData.remark3" :src="fileUrl + themeData.remark3" width="100%" height="100%" alt="">
        <div class="content">
            <div class="login-hd">
                <div class="hd-inner">
                    <img v-if="themeData.remark2" style="vertical-align: middle;" :src="fileUrl + themeData.remark2" height="70px" alt="">
                    {{themeData.remark1}}
                </div>
            </div>
            <div class="login-bd">
                <div class="bd-inner">
                    <div class="inner-wrap">
                        <div class="lg-zone">
                            <div class="lg-box">
                                <div class="lg-label">
                                    <h4>用户登录</h4>
                                </div>
                                <div class="alert" :class="errorState ? 'alert-error' : 'alert-normal'">
                                    <i class="iconfont icontishi"></i>
                                    <span :class="['alert-msg', shake ? 'alert-msg shake shake-constant shake-horizontal' : '' ]">
                                        {{errorMessage}}
                                    </span>
                                </div>
                                <form autocomplete="off">
                                    <div class="input-item clearfix">
                                        <i class="el-icon-user-solid"></i>
                                        <input type="text" v-model="txtUsername" placeholder="请输入用户账号" />
                                    </div>
                                    <div class="input-item clearfix">
                                        <i class="el-icon-lock"></i>
                                        <input type="password" v-model="txtPassword" placeholder="请输入用户密码" />
                                    </div>                                
                                    <div class="input-item input-item-captcha clearfix">
                                        <input type="text" v-model="txtCaptchaCode" placeholder="请输入验证码" />
                                        <img :src="captchaImage" class="input-item-captcha-img" alt="点击更换验证码"  @click="captchaRefresh">
                                    </div>
                                    <!-- <div class="tips clearfix">
                                        <input id="chk" type="checkbox" checked="checked" />
                                        <label for="chk">记住账号</label>
                                    </div> -->
                                    <div class="enter">
                                        <a href="javascript:;" class="supplier" @click="handleLogin">系统登录</a>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="lg-poster"></div>
                        <!-- <div class="lg-poster-title">
                            <div class="lg-poster-title-1">便携管理</div>
                            <div class="lg-poster-title-2">高效工作</div>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    mounted: function () {
        var _this = this;
        if (_this.$route.query.msg) {
            _this.$message({
                type: "warning",
                duration: 5000,
                message: _this.$route.query.msg
            });
        }
        _this.captchaRefresh();
    },
    data() {
        return {
            bgStyle: '',
            fileUrl: this.$ApiUtil.fileUrl,
            txtUsername: "",
            txtPassword: "",
            txtCaptchaId: "",
            txtCaptchaCode: "",
            shake: false,
            errorState: false,
            errorMessage: "请输入登录信息",
            captchaImage: "",
            themeData: {}
        }
    },
    created() {
        this.getSystheme();
    },
    methods: {
         /**
         * 获取系统信息
         */
        getSystheme() {
            let _this = this;
            _this.$HttpUtil.get(_this.$ApiUtil.themeSingle).then((result) => {
                if(result.code == 200) {
                    _this.themeData = result.data;
                    // _this.bgStyle = {
                    //     background: "url("+_this.fileUrl + result.data.remark3+")"
                    // } 
                }
            });
        },
        captchaRefresh() {
            var _this = this;
            _this.$HttpUtil.axios({
                method: 'get',
                url: _this.$ApiUtil.manage.home.captcha,
            }).then(function (response) {
                // console.info(response);
                _this.txtCaptchaId = response.headers["captcha-id"];
                _this.captchaImage = response.data.data;
                console.info(_this.txtCaptchaId);
            });
        },
        handleLogin() {
            var _this = this;
            _this.$HttpUtil.axios({
                url: _this.$ApiUtil.manage.home.login,
                method: 'post',
                data: {
                    "username": _this.txtUsername,
                    "password": _this.txtPassword,
                    "captchaId": _this.txtCaptchaId,
                    "captchaCode": _this.txtCaptchaCode,
                },
            }).then(function (response) {
                console.info(response);
                if (response.data.code === _this.$HttpCodeUtil.CODE_SUCCESS) {
                    window.localStorage.token = response.headers['auth-token'];
                    window.localStorage.username = response.data.data.username;
                    window.localStorage.nickname = response.data.data.nickname;
                    _this.$message({
                        type: "success",
                        message: response.data.desc
                    });
                    _this.$router.push({ name: "liveVideo" });
                }
                else {
                    _this.shake = true;
                    _this.errorState = true;
                    _this.errorMessage = response.data.desc;
                    setTimeout(function () {
                        _this.shake = false;
                    }, 500);
                }
            });
        }
    }
};
</script>

<style scoped>
@import "../../assets/css/login.css";
@import "../../assets/css/com-shake.css";
.login-bd .bd-inner {
    margin-top: 8%;
    
}
/* .app-wrapper {
    background: url("http://106.14.206.172:1159/visit-ljian/uploads/2022-01-06/220309118--WX20211117-195842@2x.png");
} */
.content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>